<template>
    <el-form :model="form" label-width="80px">
        <el-row :gutter="0">
            <el-col :span="8">
                <!-- 左侧表单 -->
                <el-form-item label="封面" prop="cover">
                    <CoverUpload v-model="form.cover" @update:filename="onFilenameUpdate"></CoverUpload>
                </el-form-item>
                <el-form-item label="账号" prop="account" style="width: 80%">
                    <el-input v-model="form.account"/>
                </el-form-item>
                <el-form-item label="密码" prop="password" style="width: 80%">
                    <el-input v-model="form.password"/>
                </el-form-item>
                <el-form-item label="用户名" prop="username" style="width: 80%">
                    <el-input v-model="form.username"/>
                </el-form-item>
                <el-form-item label="生日" prop="birthday">
                    <el-date-picker v-model="form.birthday" type="date" placeholder="Pick a date" style="width: 75%"/>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.gender">
                        <el-radio label="男"/>
                        <el-radio label="女"/>
                        <el-radio label="外星人"/>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="form.description" type="textarea" style="width: 80%"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
                <!-- 其他表单项... -->

            </el-col>
            <el-col :span="16">
                <!-- 右侧编辑器 -->
                <div>
                    <EditorMarkdown v-model="form.description"></EditorMarkdown>
                </div>
            </el-col>
        </el-row>


    </el-form>
</template>


<script lang="ts" setup>
    import axios from 'axios';
    import {reactive, ref, onMounted} from 'vue'

    const jwtToken = localStorage.getItem('jwtToken');
    const axiosInstance = axios.create({
        headers: {
            'Token': jwtToken // 将 JWT 令牌放入请求头的 token 字段
        }
    });
    // do not use same name with ref
    const onFilenameUpdate = (filename) => {
        // 在这里获取到新的 filename
        console.log('New filename:', filename);
        form.cover = filename;
        // 更新 form.cover 或执行其他操作
    }
    const form = reactive({
        id: "",
        username: '',
        cover: '',
        account: '',
        password: '',
        birthday: '',
        gender: '',
        description: '',
    })
    const userId = ref('');
    const originalUsername = ref('');
    onMounted(() => {
        // 获取令牌信息
        if (jwtToken) {
            // 解码JWT令牌（假设它是一个包含用户名的 JSON）
            const tokenData = JSON.parse(decodeURIComponent(escape(atob(jwtToken.split('.')[1]))));

            console.log('Token Data:', tokenData);
            form.id = tokenData.id; // 假设 avatarUrl 是JWT中的字段名称
//获取此时用户信息
            axiosInstance.get(`http://localhost:8080/user/showuser/${form.id}`)
                .then(response => {
                    form.account = response.data.data[0].account;
                    form.password = response.data.data[0].password;
                    form.gender = response.data.data[0].gender;
                    form.birthday = response.data.data[0].birthday;
                    form.cover = response.data.data[0].cover;
                    form.description = response.data.data[0].description;
                    form.username = response.data.data[0].username;

                    // 设置原始用户名在这里
                    originalUsername.value = form.username;
                })
                .catch(error => {
                    console.error(error);
                });
        }
    });
    //markdown编辑器设置html内容
    const setHtmlContent = (htmlContent) => {
        form.description = htmlContent;
        // 更新你的数据
    }
    const onSubmit = () => {
        axiosInstance.put(`http://localhost:8080/user/updateuser`, form)
            .then(response => {
                console.log('更新成功', response);
                alert("更新成功");
                location.reload();
            })
            .catch(error => {
                console.error('更新失败', error);
                // 在这里可以根据需要处理错误
            });
        console.log('submit!')
        console.log(form.gender)
        console.log(userId.value)
    }
</script>
<style lang="scss">


</style>